<template>
    <framework title="业务领域" :bg="require('@/assets/img/business-header.png')"
               :path="[{name:'业务领域',path:'/businessArea'}]" :wrap-style="{background: '#FFFFFF'}">
        <div class="sq_business">
            <div class="part_two">
                <div class="warp">
                    <div class="margin">
                        <div class="list_box" v-for="(item,index) in businessAreaList" :key="index">
                            <div class="img" :style="{background:`url('${item.img}')`,backgroundSize:'cover'}"></div>
                            <div class="content-warp">
                                <div class="title">{{ item.title }}</div>
                                <div class="content" v-html="item.introduce ">

                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </framework>
</template>

<script>
//业务领域
import framework from '@/components/framework'

export default {
    name: "BusinessArea",
    components: {framework},
    data() {
        return {
            businessAreaList: {}
        }
    },
    async mounted() {
        let data = await this.$http.get('/businessArea/list', {})
        this.businessAreaList = data.page.list
    },
    // setup() {
    //     const data = [
    //         {
    //             imageUrl: require('../assets/img/business-list-img-one.png'),
    //             title: '刑事辩护与代理',
    //             content: '京都的刑事诉讼业务居全国领先地位，辩护了国内多起有重大影响的大案要案，并积极参与刑事领域的国家立法活动。',
    //         },
    //         {
    //             imageUrl: require('../assets/img/business-list-img-two.png'),
    //             title: '民商事诉讼与仲裁',
    //             content: '京都的刑事诉讼业务居全国领先地位，辩护了国内多起有重大影响的大案要案，并积极参与刑事领域的国家立法活动。',
    //         },
    //         {
    //             imageUrl: require('../assets/img/business-list-img-three.png'),
    //             title: '公司与合规',
    //             content: '京都的刑事诉讼业务居全国领先地位，辩护了国内多起有重大影响的大案要案，并积极参与刑事领域的国家立法活动。',
    //         },
    //         {
    //             imageUrl: require('../assets/img/business-list-img-one.png'),
    //             title: '金融业务',
    //             content: '京都的刑事诉讼业务居全国领先地位，辩护了国内多起有重大影响的大案要案，并积极参与刑事领域的国家立法活动。',
    //         },
    //         {
    //             imageUrl: require('../assets/img/business-list-img-one.png'),
    //             title: '房地产与建设工程',
    //             content: '京都的刑事诉讼业务居全国领先地位，辩护了国内多起有重大影响的大案要案，并积极参与刑事领域的国家立法活动。',
    //         },
    //         {
    //             imageUrl: require('../assets/img/business-list-img-one.png'),
    //             title: '环境与资源',
    //             content: '京都的刑事诉讼业务居全国领先地位，辩护了国内多起有重大影响的大案要案，并积极参与刑事领域的国家立法活动。',
    //         },
    //         {
    //             imageUrl: require('../assets/img/business-list-img-one.png'),
    //             title: '财务管理',
    //             content: '京都的刑事诉讼业务居全国领先地位，辩护了国内多起有重大影响的大案要案，并积极参与刑事领域的国家立法活动。',
    //         },
    //         {
    //             imageUrl: require('../assets/img/business-list-img-four.png'),
    //             title: '创新业务',
    //             content: '京都的刑事诉讼业务居全国领先地位，辩护了国内多起有重大影响的大案要案，并积极参与刑事领域的国家立法活动。',
    //         },
    //         {
    //             imageUrl: require('../assets/img/business-list-img-one.png'),
    //             title: '商事顾问',
    //             content: '京都的刑事诉讼业务居全国领先地位，辩护了国内多起有重大影响的大案要案，并积极参与刑事领域的国家立法活动。',
    //         },
    //         {
    //             imageUrl: require('../assets/img/business-list-img-five.png'),
    //             title: '企业合规审查',
    //             content: '京都的刑事诉讼业务居全国领先地位，辩护了国内多起有重大影响的大案要案，并积极参与刑事领域的国家立法活动。',
    //         },
    //         {
    //             imageUrl: require('../assets/img/business-list-img-one.png'),
    //             title: '行政诉讼',
    //             content: '京都的刑事诉讼业务居全国领先地位，辩护了国内多起有重大影响的大案要案，并积极参与刑事领域的国家立法活动。',
    //         },
    //         {
    //             imageUrl: require('../assets/img/business-list-img-one.png'),
    //             title: '其他',
    //             content: '京都的刑事诉讼业务居全国领先地位，辩护了国内多起有重大影响的大案要案，并积极参与刑事领域的国家立法活动。',
    //         },
    //
    //
    //     ]
    //     return {
    //         data
    //     }
    //}
}
</script>

<style scoped lang="less">

.sq_business {

    .part_two {
        overflow: hidden;
        padding: 50px 0 65px;
        .warp {
           // padding: 50px;
            .margin {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-gap: 10px;

                .list_box {
                    border: 1px dashed #707070;
                    .content-warp {
                        padding: 20px;
                        width: calc(100% - 40px);
                    }

                    .img {
                        width: 100%;
                        //padding-top: 60%;
                        height: 323px;
                    }

                    .content-warp:hover .title {
                        color: #169BD5;
                    }

                    .content-warp:hover .content {
                        color: #169BD5;
                    }

                    .title {
                        line-height: 36px;
                        padding: 12px 0 7px;
                        height: 32px;
                        font-weight: bold;
                        color: #707070;
                        text-align: center;
                    }

                    .content {
                        color: #666;
                        line-height: 24px;
                        height: 96px;
                        overflow: hidden;
                        text-indent: 2rem;
                        word-break: break-all;
                        display: -webkit-box;
                        -webkit-line-clamp: 4;    /* 指定行数*/
                        -webkit-box-orient: vertical;

                    }
                }
            }

        }

    }
}
</style>

<style lang="less">
@media screen and (min-width: 0px) and (max-width: 680px) {
    #app {
        .sq_business {
            width: 100%;

            .part_two {
                padding: 0;

                .warp {
                    padding: 0;

                    .margin {
                        grid-template-columns:1fr;
                        border-width: 1px;

                        .list_box {
                            overflow: hidden;

                            .content-warp {
                                padding: 10px;
                            }

                            .title {
                                font-size: 14px;
                                padding: 0;
                                height: auto;
                                line-height: 20px;
                                overflow: hidden; //超出的文本隐藏
                                text-overflow: ellipsis; //溢出用省略号显示
                                white-space: nowrap; //溢出不换行
                            }

                            .content {
                                font-size: 10px;
                                margin: 0;
                                height: 100%;
                                text-indent: 2rem;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
